<template>
<a-config-provider :getPopupContainer="getPopupContainer" :locale="$t('antd')" :autoInsertSpaceInButton="false">
    <div id="app">
        <a-radio-group v-model="value" @change="onChange">
            <a-radio-button value="zh">
                {{$t('chineseBtn')}}
            </a-radio-button>
            <a-radio-button value="en">
                {{$t('enBtn')}}
            </a-radio-button>
        </a-radio-group>
        <router-view />
    </div>

</a-config-provider>
</template>

<script lang="ts">
import {
    Component,
    Vue
} from 'vue-property-decorator';
@Component
export default class App extends Vue {
    name: string = 'App';
    data() {
        // console.log(this.$i18n);
        return {
            value: 'zh'
        };
    }
    onChange(e: any) {
        const v = e.target.value;
        this.$i18n.locale = v;
    }
    getPopupContainer(el: any, dialogContext: any): object {
        if (dialogContext) {
            return dialogContext.getDialogWrap();
        }
        return document.body;
    }
}
</script>  

<style lang="less">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
    width: 100%;
    position: relative;
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
